﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="lp_Share.aspx.cs" Inherits="ZLDC.Estate.Quantify.Report.lp_Share" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>市场占有率分析</title>

    <script src="../../js/jquery/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="../../js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

    <script src="js/jquery.autocomplete.js" type="text/javascript"></script>

    <link href="js/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <link href="../../css/main1.css" rel="stylesheet" type="text/css" />

    <script src="js/lp_Share.js" type="text/javascript"></script>

    <%-- <script src="../Highcharts-2.1.9/jquery1.6.1min.js" type="text/javascript"></script>--%>

    <script src="../Highcharts-2.1.9/js/highcharts.js" type="text/javascript"></script>

    <script src="../Highcharts-2.1.9/js/modules/exporting.js" type="text/javascript"></script>

    <style type="text/css">
        .td1
        {
            background-color: #FFFFFF;
        }
        #tabs0
        {
            height: 100%;
            width: 100%;
            border: 1px solid #cbcbcb;
            background-color: #f2f6fb;
        }
        .menu0
        {
            width: 600px;
        }
        .menu0 li
        {
            background: url(../../images/r.png) 0px -1138px no-repeat;
            color: #484848;
            font-size: 12px;
            display: block;
            margin-top: 5px;
            margin-left: 5px;
            padding-top: 3px;
            text-align: center;
            width: 60px;
            height: 18px;
            float: left;
            cursor: pointer;
        }
        .menu0 li.hover
        {
            background: #f2f6fb;
            color: Red;
            font-size: 14px;
            font-weight: bold;
            color: #ff7416;
            border-top: 1px solid #d2d2d2;
            border-left: 1px solid #d2d2d2;
            border-right: 1px solid #d2d2d2;
            background: #fff;
            margin-top: 2px;
            margin-left: 5px;
            text-align: center;
        }
        #main0 ul
        {
            display: none;
        }
        #main0 ul.block
        {
            display: block;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divSearch" style="margin-top: 5px; text-align: center; height: 100%">
        <table border='0' cellpadding='3' cellspacing='1' bgcolor='#a8c7ce' class="table1"
            style="height: 100%; width: 100%">
            <tr>
                <td style="width: 45%;" class="td1" nowrap>
                    时间:<input id="iStartDay" name="iStartDay" runat="server" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM'})"
                        class="txtbox" style="width: 100px;" />
                    ~
                    <input id="iEndDay" name="iEndDay" runat="server" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM'})"
                        class="txtbox" style="width: 100px;" />
                </td>
                <%--   <td class="td1" colspan="0">
                    <asp:Button ID="Button2" runat="server" Text="导出" CssClass="button_bak" OnClick="Button2_Click" />&nbsp;&nbsp;
                    <input id="Button1" class="button_bak" type="button" value="查询" onclick="divajaxlist()" />&nbsp;&nbsp;<input
                        id="Reset1" type="reset" value="重置" class="button_bak" />
                </td>--%>
            </tr>
        </table>
        <div class="desk">

            <script type="text/javascript">
                function setTab(m, n) {
                    var tli = document.getElementById("menu" + m).getElementsByTagName("li");
                    var mli = document.getElementById("main" + m).getElementsByTagName("ul");
                    for (i = 0; i < tli.length; i++) {
                        tli[i].className = i == n ? "hover" : "";
                        mli[i].style.display = i == n ? "block" : "none";

                    }
                    switch (n) {

                        case 0:
                            //var di = document.getElementById('div' + n);
                            divajaxlist()
                            break;
                        case 1:
                            var di = document.getElementById('div' + n);
                            curr1(di)
                            break
                        case 2:
                            var di = document.getElementById('div' + n);
                            curr2(di)
                            break; ;
                    }
                }

                function curr1(obj) {
                    var startday = document.getElementById('iStartDay').value;
                    var endday = document.getElementById('iEndDay').value;
                    var sCity2 = '全部', sCity3 = '全部';
                    document.getElementById(obj.id).innerHTML = "<img src=\"../../images/loading.gif\"  />";

                    sCity2 = document.getElementById('sCity2').options[document.getElementById('sCity2').selectedIndex].text;
                    if (document.getElementById('sCity3').length > 0)
                        sCity3 = document.getElementById('sCity3').options[document.getElementById('sCity3').selectedIndex].text;


                    $.ajax({
                        type: "POST",
                        url: "../AjaxServer.aspx",
                        dataType: 'json',
                        data: "alt=cruucity&sCity2=" + sCity2 + "&sCity3=" + sCity3 + "&startday=" + startday + "&endday=" + endday + "",
                        processData: false,
                        timeout: '10000',
                        success: function(json) {

                            divchart1(json, obj);
                        },
                        error: function() {

                            document.getElementById(obj.id).innerHTML = "系统繁忙";
                        }

                    });
                }



                function divchart1(msg, obj) {
                    var json = msg;
                    var record = json.record;

                    if (record == null || record.length == 0) {
                        $("#" + obj.id + "").html("<font color='red'>&nbsp;系统内暂无您查询的信息!</font>");
                        return;
                    }
                    var categorieslist = '';
                    var datalist = '';
                    var datafloat = '';
                    for (var i = 0; i < record.length; i++) {
                        if (i == 0) {
                            categorieslist += "['" + record[i].sharedate + "',";
                            datafloat += "[" + tootoDecimal(changeTwoDecimal_f(record[i].sharecompany / record[i].number) * 100) + ",";
                        } else {
                            if (record.length == i + 1) {
                                categorieslist += "'" + record[i].sharedate + "']";
                                datafloat += tootoDecimal(changeTwoDecimal_f(record[i].sharecompany / record[i].number) * 100) + "]";
                                datalist += record[i].number + "";
                            }
                            else {
                                categorieslist += "'" + record[i].sharedate + "',";
                                datafloat += "" + tootoDecimal(changeTwoDecimal_f(record[i].sharecompany / record[i].number) * 100) + ",";
                                datalist += record[i].number + ",";
                            }
                        }
                    }
                    var sCity2 = '全部', sCity3 = '全部';
                    

                    sCity2 = document.getElementById('sCity2').options[document.getElementById('sCity2').selectedIndex].text;
                    if (document.getElementById('sCity3').length > 0)
                        sCity3 = document.getElementById('sCity3').options[document.getElementById('sCity3').selectedIndex].text;
                    if (sCity2 == '全部') {
                        sCity2 = '全市';
                    }
                    if (sCity3 == '全部') {
                        sCity3 = '';
                    }
                    var chart;
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: '' + obj.id + '',
                            defaultSeriesType: 'line'
                        },
                        title: {
                        text: '' + sCity2+sCity3 + '占有率'
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: eval(categorieslist)
                            //categories: ['2012-06','2012-07']
                        },
                        yAxis: {
                            title: {
                                //text: 'Temperature (°C)'
                                text: '占有率'
                            }
                        },
                        tooltip: {
                            enabled: false,
                            formatter: function() {
                                return '<b>' + this.series.name + '</b><br/>' +
								this.x + ': ' + this.y + '%';
                            }
                        },
                        plotOptions: {
                            line: {
                                dataLabels: {
                                    enabled: true
                                },
                                enableMouseTracking: false
                            }
                        },
                        series: [{
                            name: '占有率%',
                            data: eval(datafloat)
                        }
                        // , {
                        //                    name: 'London',
                        //                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                        //}
]
                    }
                );



                }
                function curr2(obj) {
                    var startday = document.getElementById('iStartDay').value;
                    var endday = document.getElementById('iEndDay').value;
                    var c1;
                    var temp = document.getElementsByName("c1");
                    for (i = 0; i < temp.length; i++) {

                        //遍历Radio

                        if (temp[i].checked) {
                           

                            c1 = temp[i].value;

                            //传递给另外一个表单

                        }

                    }
                    
                   // var c3 = document.getElementById('c3').value;
                    document.getElementById(obj.id).innerHTML = "<img src=\"../../images/loading.gif\"  />";
                    $.ajax({
                        type: "POST",
                        url: "../AjaxServer.aspx",
                        dataType: 'json',
                        data: "alt=deptchart&startday=" + startday + "&endday=" + endday + "&c1=" + escape(c1) + "",
                        processData: false,
                        timeout: '10000',
                        success: function(json) {

                            divchart2(json, obj);
                        },
                        error: function() {

                            document.getElementById(obj.id).innerHTML = "系统繁忙";
                        }

                    });
                }
                function divchart2(msg, obj) {
                    var json = msg;
                    var record = json.record;

                    if (record == null || record.length == 0) {
                        $("#" + obj.id + "").html("<font color='red'>&nbsp;系统内暂无您查询的信息!</font>");
                        return;
                    }
                    document.getElementById(obj.id).style.width = '1500px';
                   
                    var categorieslist = '';
                    var datalist = '';
                    var datafloat = '';
                    for (var i = 0; i < record.length; i++) {
                        if (i == 0) {
                            categorieslist += "['" + record[i].share + "',";
                            datafloat += "[" + changeTwoDecimal_f(record[i].sharecompany / record[i].number) * 100 + ",";
                        }
                        else {
                            if (record.length == i + 1) {

                                categorieslist += "'" + record[i].share + "']";

                                datafloat += changeTwoDecimal_f(record[i].sharecompany / record[i].number) * 100 + "]";

                            }
                            else {
                                categorieslist += "'" + record[i].share + "',";
                                datafloat += "" + changeTwoDecimal_f(record[i].sharecompany / record[i].number) * 100 + ",";

                            }
                        }
                    }
                    var chart;

                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: '' + obj.id + '',
                            defaultSeriesType: 'column'
                        },
                        title: {
                            text: '部门占有率'
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: eval(categorieslist)
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '占有率%'
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            backgroundColor: '#FFFFFF',
                            align: 'left',
                            verticalAlign: 'top',
                            x: 100,
                            y: 70,
                            floating: true,
                            shadow: true
                        },
                        tooltip: {
                            formatter: function() {
                                return '' +
								this.x + ': ' + this.y + '%';
                            }
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [{
                            name: '部门',
                            //data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                            data: eval(datafloat)
                        }
                        //                                , {
                        //                                    name: 'New York',
                        //                                    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

                        //                                }, {
                        //                                    name: 'London',
                        //                                    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

                        //                                }, {
                        //                                    name: 'Berlin',
                        //                                    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

                        //                                }
]
                    });




                }
            </script>

            <div id="tabs0" style="height: 100%">
                <ul class="menu0" id="menu0">
                    <li onclick="setTab(0,0)" class="hover">热前15</li>
                    <li onclick="setTab(0,1)">月占有率</li>
                    <li onclick="setTab(0,2)">部门比率</li>
                </ul>
                <br />
                <div>
                    <div id="main0">
                        <ul class="block">
                            <li style="list-style-type: none;">
                                <div style="text-align: left; font-size: 12px;">
                                    <input id="btnsl" class="button_bak" type="button" value="查询" onclick="setTab(0,0)" />
                                </div>
                                <div id="div0">
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li style="list-style-type: none;">
                                <div style="text-align: left; font-size: 12px;">
                                    营业部:<select id="sCity2" name="sCity2" runat="server" style="width: 120px;" onchange="loadCity('sCity2', 'sCity3')">
                                    </select>
                                    区域:
                                    <select id="sCity3" name="sCity3" runat="server" style="width: 120px;">
                                    </select>
                                    <input id="Button1" class="button_bak" type="button" value="查询" onclick="setTab(0,1)" /></div>
                                <div id="div1">
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li style="list-style-type: none;">

                                <script type="text/javascript">
                                    var depttype = '<%=depttype %>';
                                    if (depttype == '后勤')
                                    { }
                                    if (depttype == '营业大部')
                                    { }
                                    if (depttype == '营业部')
                                    { }
                                    if (depttype == '区域')
                                    { }
                                    if (depttype == '分行')
                                    { }
                                    
                                </script>

                                <input id="c1" type="radio"  value="营业部" checked="checked" name="c1"/>营业部
                                <input id="c2" type="radio"  value="区域" name="c1"/>区域
                               <%-- <input id="c1" type="checkbox" checked="checked" name="c1" value="营业部" />营业部
                                <input id="c2" type="checkbox" name="c1" value="区域" />区域--%>
                                 &nbsp;&nbsp;<input
                                        id="Button2" type="button" value="查询" onclick="setTab(0,2)" />
                                <div id="div2">
                                    3</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../js/LexunJS.js" type="text/javascript"></script>

    </form>
</body>
</html>
